<template>
  <div class="page">
    <div class="page-bg">
      <div class="page8">
        <div class="page-title">
          分类统计
        </div>
        <div class="page-content">
          <div class="tabs">
            <div :class="currentIndex == 1 ? 'active' : ''" @click="changeTab(1)">
              本月工单
            </div>
            <div :class="currentIndex == 2 ? 'active' : ''" @click="changeTab(2)">
              本年工单
            </div>
          </div>
          <div class="bg">
            <div class="echarts">
              <div id="echarts08_1"></div>
            </div>
          </div>
          <div class="bg mf">
            <div class="echarts">
              <div id="echarts08_2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { echartsConfig } from "@/common/echartsConfig.js";
import requst from "@/api/api";

export default {
  name: "page8",
  components: {},
  data() {
    return {
      chartData: [],
      currentIndex: 1,
    };
  },
  async mounted() {
    const {
      data: { data },
    } = await requst.get("/api/1/page/8", {});
    this.chartData = data;
    console.log("data :>> ", data);
    this.getEcharts();
  },
  methods: {
    changeTab(number) {
      this.currentIndex = number;
      this.getEcharts(number);
    },
    getEcharts(number) {
      let left = this.chartData[number === 1 ? "currentMonth" : "currentYear"].Level1;
      let right = this.chartData[number === 1 ? "currentMonth" : "currentYear"].Level2;
      left = left.map((e) => ({ name: e.NAME, value: e.VALUE, ...e }));
      right = right.map((e) => ({ name: e.NAME, value: e.VALUE, ...e }));
      let params1 = {
        color: [
          "#fff",
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#7EEFFF" },
            { offset: 1, color: "#4394FF" },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#4386FF" },
            { offset: 1, color: "#6E5AFF" },
          ]),
        ],
        echartData: left,
        id: "echarts08_1",
        number: 1,
      };

      let params2 = {
        color: [
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD993" },
            { offset: 1, color: "#FF7E62" },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#4386FF" },
            { offset: 1, color: "#6E5AFF" },
          ]),
        ],
        echartData: right,
        id: "echarts08_2",
        number: 2,
      };

      // if (number == 2) {
      //   params1.echartData = left;

      //   params2.echartData = right;
      // }

      this.echarts01(params1);
      this.echarts01(params2);
    },
    echarts01(echart) {
      let myChart = this.$echarts.init(document.getElementById(echart.id));
      let bgColor = "#081a53";

      let option = {
        series: [
          {
            minAngle: 60,
            type: "pie",
            radius: ["35%", "55%"],
            center: ["50%", "50%"],
            data: echart.echartData,
            hoverAnimation: true,
            itemStyle: {
              normal: {
                borderColor: bgColor,
                borderWidth: 8,
                color: function(params) {
                  return echart.color[params.dataIndex];
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                  width: 2,
                },
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  let name = "";
                  if (params.name.length > 5) {
                    name = params.name.substr(0, 5) + "...";
                  } else {
                    name = params.name;
                  }
                  return (
                    "{value|" + params.value + "单}\n\n{nameColor" + echart.number + params.dataIndex + "|" + name + "}"
                  );
                },
                padding: [0, -100, 0, -100],
                rich: {
                  nameColor10: {
                    fontSize: 30,
                    color: "#FFFFFF",
                  },
                  nameColor11: {
                    fontSize: 30,
                    color: "#7DEFFF",
                  },
                  nameColor12: {
                    fontSize: 30,
                    color: "#4495FF",
                  },
                  nameColor13: {
                    fontSize: 30,
                    color: "#FFFFFF",
                  },
                  nameColor14: {
                    fontSize: 30,
                    color: "#7DEFFF",
                  },
                  nameColor15: {
                    fontSize: 30,
                    color: "#FFCB8B",
                  },
                  nameColor20: {
                    fontSize: 30,
                    color: "#FFCB8B",
                  },
                  nameColor21: {
                    fontSize: 30,
                    color: "#55B8FF",
                  },
                  nameColor22: {
                    fontSize: 30,
                    color: "#FFCB8B",
                  },
                  nameColor23: {
                    fontSize: 30,
                    color: "#55B8FF",
                  },
                  nameColor24: {
                    fontSize: 30,
                    color: "#FFCB8B",
                  },
                  nameColor25: {
                    fontSize: 30,
                    color: "#7DEFFF",
                  },
                  value: {
                    fontSize: 30,
                    color: "#fff",
                  },
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option, true);
      if (echart.number === 1) {
        myChart.on("click", this.pieConsole);
      }
    },
    async pieConsole(param) {
      const code = param.data.CODE;

      const {
        data: { data },
      } = await requst.post("/api/1/page/level2", { taskCode: code });
      console.log("data :>> ", data);

      let right = data[this.currentIndex === 1 ? "currentMonth" : "currentYear"].Level2;
      right = right.map((e) => ({ name: e.NAME, value: e.VALUE, ...e }));

      let params = {
        color: [
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FFD993" },
            { offset: 1, color: "#FF7E62" },
          ]),
          new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#4386FF" },
            { offset: 1, color: "#6E5AFF" },
          ]),
        ],
        echartData: right,
        // echartData: [
        //   {
        //     name: "数据名称",
        //     value: "400",
        //   },
        //   {
        //     name: "数据名称",
        //     value: "600",
        //   },
        // ],
        id: "echarts08_2",
        number: 2,
      };

      // if (param.name == "投诉建议") {
      //   params.echartData = [
      //     {
      //       name: "数据名称",
      //       value: "300",
      //     },
      //     {
      //       name: "数据名称",
      //       value: "200",
      //     },
      //   ];
      // } else if (param.name == "维修") {
      //   params.echartData = [
      //     {
      //       name: "数据名称",
      //       value: "200",
      //     },
      //     {
      //       name: "数据名称",
      //       value: "300",
      //     },
      //   ];
      // } else if (param.name == "咨询") {
      //   params.echartData = [
      //     {
      //       name: "数据名称",
      //       value: "400",
      //     },
      //     {
      //       name: "数据名称",
      //       value: "200",
      //     },
      //   ];
      // }

      this.echarts01(params);
    },
  },
};
</script>
<style lang="scss" scoped>
.page8 {
  .page-content {
    width: 1568rem;
    height: 584rem;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 216rem;
    display: flex;
    flex-wrap: wrap;
    .bg {
      background: url("../assets/images/pie-bg1@2x.png") no-repeat;
      width: 752rem;
      height: 584rem;
      background-size: 100% 100%;

      .echarts {
        position: relative;
        width: 753rem;
        height: 585rem;
        #echarts08_1,
        #echarts08_2 {
          width: 753rem;
          height: 585rem;
        }
      }
    }
    .mf {
      margin-left: 64rem;
    }

    .tabs {
      display: flex;
      flex-direction: row;
      position: absolute;
      top: 144rem;
      > div {
        position: relative;
        width: 178rem;
        height: 80rem;
        background: rgba(255, 255, 255, 0);
        border-radius: 0 4rem 4rem 0;
        border: 2rem solid #0071ad;
        font-size: 32rem;
        color: #82e8ff;
        text-align: center;
        line-height: 80rem;
        cursor: pointer;

        &.active {
          color: #fff;
          background: linear-gradient(180deg, rgba(0, 144, 255, 0.12) 0%, rgba(0, 240, 255, 0.13) 100%);
          box-shadow: 0 8rem 16rem 0 rgba(0, 229, 255, 0.2);
          border-radius: 4rem 0 0 4rem;
          border: 2rem solid;
          border-image: linear-gradient(180deg, rgba(54, 169, 255, 1), rgba(90, 254, 255, 1)) 2 2;
        }
      }
    }
  }
}
</style>
